<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/scope.js"></script>
</head>
<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a
						href="http://www.quizzpot.com/2009/03/que-es-el-scope-o-alcance-de-una-variable/">¿Que
						es el scope o alcance de una variable?</a>
				</h2>
				<span class="smalltext">Mar 03, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/que-es-el-scope-o-alcance-de-una-variable/#comments"
					title="Comment on ¿Que es el scope o alcance de una variable?">11
						Comments</a> | <a
					href="http://www.quizzpot.com/2009/03/what-is-the-scope-of-a-variable/">Read
						in English</a>
				</span>
				<p>Cuando nos referimos al “scope” nos estamos refiriendo al
					alcance o al área donde una variable puede utilizarse, en este tema
					veremos como maneja JavaScript este concepto.</p>
			</div>
			<div class="tns">
				<div>
					<a
						href="http://www.quizzpot.com/2009/03/que-es-el-scope-o-alcance-de-una-variable/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/scope.jpg"
						alt="¿Que es el scope o alcance de una variable?"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix"></p>
		</div>

		<div class="video">
			<object width="504" height="380">
				<param name="allowfullscreen" value="true">
				<param name="allowscriptaccess" value="always">
				<param name="movie"
					value="http://vimeo.com/moogaloop.swf?clip_id=3455943&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=474747&amp;fullscreen=1">
				<embed
					src="http://vimeo.com/moogaloop.swf?clip_id=3455943&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=474747&amp;fullscreen=1"
					type="application/x-shockwave-flash" allowfullscreen="true"
					allowscriptaccess="always" width="504" height="380">
			</object>
		</div>

		<p>En JavaScript el alcance de las variables sucede de una función
			y no de bloques (if, while, switch, etc.) como en lenguajes Java o
			C/C++; en otras palabras si se define una variable dentro de un
			bloque condicional (if) esta variable se podrá utilizar en toda la
			función en cuestión y no solamente en el bloque definido. Veamos el
			siguiente ejemplo que demuestra lo que se acaba de mencionar:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">if</span><span>(</span><span
						class="keyword">true</span><span>){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;test&nbsp;=&nbsp;</span><span
						class="string">'is&nbsp;it&nbsp;a&nbsp;block&nbsp;var?'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="keyword">function</span><span>&nbsp;testing(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;test&nbsp;=&nbsp;</span><span
						class="string">'testing&nbsp;scope!'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>testing();&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>console.debug(test);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">if(true){
            var test = 'is it a block var?';
}

function testing(){
            var test = 'testing scope!';
}
testing();

console.debug(test);
</pre>
		<p>Dentro de la condición se ha definido la variable “test”, en
			lenguajes como Java ésta variable debería existir sólo dentro de la
			condición, pero en JavaScript no sucede de esta manera ya que esa
			variable ha sido definida en el “global scope” y no dentro del bloque
			condicional. Por otro lado la variable que se definió dentro de la
			función “testing” sólo existe dentro de esa función.</p>
		<p>Es importante mencionar que las variables declaradas en el
			“global scope” son propiedades del objeto “window”, para comprobar
			esta afirmación basta con hacer lo siguiente:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;global&nbsp;=&nbsp;</span><span
						class="string">'this&nbsp;is&nbsp;a&nbsp;global&nbsp;var!'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>console.debug(window.global);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">var global = 'this is a global var!';

console.debug(window.global);
</pre>
		<p>Otro punto a tomar en cuenta es que cuando no se declaran las
			variables utilizando la palabra reservada “var” no importa si están
			dentro de una función o no, estas variables automáticamente serán
			definidas en el “global scope”.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">function</span><span>&nbsp;globalScopeFunction(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalScope&nbsp;=&nbsp;<span
						class="string">'this&nbsp;is&nbsp;a&nbsp;new&nbsp;var&nbsp;in&nbsp;the&nbsp;global&nbsp;scope!'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>globalScopeFunction();&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>console.debug(globalScope);&nbsp;&nbsp;</span></li>
				<li class="alt"><span>console.debug(window.globalScope);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">function globalScopeFunction(){
            globalScope = 'this is a new var in the global scope!';
}
globalScopeFunction();

console.debug(globalScope);
console.debug(window.globalScope);
</pre>
		<p>Es importante saber estos conceptos pues los necesitaremos más
			adelante, además de que ahora sabremos con exactitud el alcance de
			las variables y donde podemos usarlas.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323061863548&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-es-el-scope-o-alcance-de-una-variable%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-es-el-scope-o-alcance-de-una-variable%2F&amp;text=%C2%BFQue%20es%20el%20scope%20o%20alcance%20de%20una%20variable%3F%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-es-el-scope-o-alcance-de-una-variable%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-es-el-scope-o-alcance-de-una-variable%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
</body>
</html>